<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    产品A:<input type="text" value="100" name="product" title="产品A">
    产品B:<input type="text" value="80"  name="product" title="产品B">
    产品C:<input type="text" value="120" name="product" title="产品C">
    产品D:<input type="text" value="100" name="product" title="产品D">
    产品E:<input type="text" value="100" name="product" title="产品E">
    <input type="button" value="绘制" onclick="draw()">
    <br>
    <canvas id="c" width="900" height="500">您的浏览器不支持该标签</canvas>
    <script>
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");
        function draw() {
            ctx.clearRect(0,0,900,500);
            //绘制x轴
            ctx.beginPath();
            ctx.moveTo(50,450);
            ctx.lineTo(850,450);
            ctx.stroke();

            //绘制y轴
            ctx.moveTo(50,450);
            ctx.lineTo(50,20);
            ctx.stroke();

            //绘制y箭头
            ctx.beginPath();
            ctx.fillStyle="black";
            ctx.moveTo(50,20);
            ctx.lineTo(45,25);
            ctx.lineTo(55,25);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

            //绘制x箭头
            ctx.beginPath();
            ctx.fillStyle="black";
            ctx.moveTo(850,450);
            ctx.lineTo(845,445);
            ctx.lineTo(845,455);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            
            var array=document.getElementsByName("product");//所有的文本框的DOM对象的集合
            var maxValue=array[0].value*1;//number假设最大值是第一个元素

            //找到所有元素当中的最大值
            for(var i=0;i<array.length;i++){
                if(array[i].value*1>maxValue){
                    maxValue=array[i].value*1;
                }
            }
            console.log(maxValue);

            ctx.beginPath();
            ctx.font="20px Arial";
            for(var i=0;i<4;i++){
                ctx.moveTo(50,50+100*i);
                ctx.lineTo(850,50+100*i);
                ctx.stroke();
                ctx.strokeText(maxValue*(4-i)/4,11,50+100*i);
            }
        /* 
           
                 400                    m
                ----------      =  -----------   m = 60*400/maxValue
                maxValue                60
        */

            var temp=400/maxValue;//比例值
            ctx.fillStyle="skyblue";
            for(var i=0;i<array.length;i++){
                var y=450-array[i].value*1*temp;
                var x=100+150*i;
                ctx.fillRect(x,y,50,array[i].value*1*temp);
                ctx.strokeText(array[i].getAttribute("title"),x,480);
            }

        }
        draw();
    </script>
</body>

</html>